<template>
  <div class="header">
    <div class="left">
      <span style="font-size: 20px">->{{ state.name }}</span>
    </div>
    <div class="center"> 
      <el-input v-model="input" placeholder="请输入关键字" />
      <el-button type="primary" :icon="Search" @click="GetQuestionList()">搜索</el-button>
 
    </div>
    <div class="right">
        
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            :router="true"
            active-color = #409EFF
          >
            <el-menu-item index="/"><router-link :to="{ name:'index'}">手工组卷</router-link></el-menu-item>
            <el-menu-item index="/automaticGroup"><router-link to="/automaticGroup">智能组卷</router-link></el-menu-item>
            <div class="flex-grow" />
            <el-menu-item index="/square"><router-link :to="{ name:'square'}">题目广场</router-link></el-menu-item>
            <el-sub-menu index="/addQuestion">
              <template #title>录入题目</template>
              <el-menu-item index="/addQuestion"><router-link :to="{ name:'addQuestion',}">录入单题</router-link></el-menu-item>
              <el-menu-item index="/addQuestions"><router-link :to="{ name:'addQuestions'}">录入多题</router-link></el-menu-item>
              <el-menu-item index="/importQuestions">导入题目</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/user-infor">
              <template #title>我</template>
              <el-menu-item index="/basic-infor">基本资料</el-menu-item>
              <el-menu-item index="/changepassword">修改密码</el-menu-item>
              <el-menu-item index="/signout">退出登陆</el-menu-item>
              <el-menu-item index="/feedback">反馈意见</el-menu-item>
              <el-sub-menu index="3-4">
                <template #title>我的题目</template>
                <el-menu-item index="3-4-1">我收藏的</el-menu-item>
                <el-menu-item index="3-4-2">我录入的</el-menu-item>
                <el-menu-item index="3-4-3">item three</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
   
    </div>
  </div>
</template>

<script setup>
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { localRemove, pathMap } from '@/utils'
import { Search } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute
const input = ref('')
const state = reactive({
  name: '首页',
  isLogin: false
})

onMounted(() => {
  state.name = pathMap[route.name]
  
})
router.afterEach((to) => {
  state.name = pathMap[to.name]
})
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}
const GetQuestionList=()=>{
  router.push("searchQuestion")
}
</script>

<style scoped>
  .header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

  }
</style>